import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';   //BrowerRouter使用H5 historyAPI
import { createStore } from 'redux';
import { Provider } from 'react-redux';
// import { createStore } from 'src/lib/redux';
// import { Provider } from 'src/lib/react-redux';

import RouterComponent from './router';

import themeReducer from 'src/store/themeReducer';


// 将state保存到localstorage---之“取”方法
const loadState = () => {
	try {
		const serializedState = localStorage.getItem('state');
		if (serializedState === null) {
			return {themeColor:'pink'};
		} else {
			let state = JSON.parse(serializedState);
			// 判断本地存储的state版本，如果落后于代码的版本，则清空state
			if (state.version < __VERSION__) {
				return undefined;
			} else {
				return state;
			}
		}
	} catch (err) {
		// ...错误处理
		return undefined;
	}
}
// 将state保存到localstorage---之何时取
const store = createStore(themeReducer,loadState())  //第一个参数是个reducer，第二个是初始化state状态

// 将state保存到localstorage---之“存”方法
const saveState = (state) => {
	try {
		const serializedState = JSON.stringify(state);
		localStorage.setItem('state', serializedState);
	} catch (err) {
		// ...错误处理
	}
};

var __VERSION__ = 1.0

// 将state保存到localstorage---之何时存
window.onbeforeunload = (e) => {           //用到了页面关闭事件
	store.dispatch({
		type: 'VERSION_UPDATE',
		payload: __VERSION__               // 代码全局变量，随工程配置一起处理即可。每次涉及需要更新state的时候，必须更新此版本号。
	})
	const state = store.getState();
	saveState(state);
}

render(
	<BrowserRouter>
		<Provider store={store}>	
			<RouterComponent />
		</Provider>
	</BrowserRouter>,
	document.getElementById('app')
)



/**
 * 使用H5 historyAPI打包上线时有可能，页面刷新后空白。
 * 这是由于history模式不同于哈希模式，地址栏刷新时，会向服务器发送请求造成的。
 * 因此我们需要服务器做一下改动。
 * 这里以node为例：
 * 
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源位public文件夹
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

*/